<template>
  <van-nav-bar title="订单列表" :fixed="true" left-arrow @click-left="$router.back()"/>
  <van-tabs v-model:active="activeName" class="mt46">
    <van-tab title="全部" name="0"></van-tab>
    <van-tab title="待付款" name="1"></van-tab>
    <van-tab title="已支付" name="2"></van-tab>
    <van-tab title="发货" name="3"></van-tab>
    <van-tab title="交易完成" name="4"></van-tab>
    <van-tab title="过期" name="5"></van-tab>
  </van-tabs>
  <div class="noMore" v-if="orderListData.length === 0">没有更多订单了</div>
  <div class="orderList">
    <div class="orderItem"
    v-for="item in orderListData"
    @click="router.push({name: 'orderDetail',params:{id:item.id}})"
    >
      <div class="orderHeader">
        <span>订单号：{{item.order_no}}</span>
        <br>
        <span>创建时间：{{item.created_at}}</span>
      </div>
      <van-card
        :title="item.orderDetails.data[0].goods.title"
        :thumb="item.orderDetails.data[0].goods.cover_url"
        desc="全场包邮"
        :num="item.orderDetails.data[0].num"
        >
        <template #price>
          <div>
            &yen;{{item.orderDetails.data[0].goods.price}}
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>
    
<script setup lang='ts'>
import { onMounted, ref, watch } from 'vue';
import { orderList } from '@/api/cart'
import { useRouter } from 'vue-router'

  let activeName = ref(0)
  const router = useRouter()
  const orderListData = ref<any>([])
  // 获取列表数据
  const getOrderList = async () => {
    let list = {
      page:1,
      status:activeName.value,
      include:"orderDetails.goods"
    }
    let res = await orderList(list)
    if(res.status === 200){
      orderListData.value = res.data.data
    }
  }
  // 监听标签页
  watch(activeName, (newVal,oldVal) => {
    activeName.value = newVal
    getOrderList()
  })
  onMounted(() => {
    getOrderList()
  })
</script>
    
<style scoped lang="less">
.noMore {
  margin-top: 60px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
}
.orderList {
  margin: 10px 0 50px;
  .orderItem {
    border-top: 1px solid #ff6a00;
    border-bottom: 1px solid #ff6a00;
    margin-bottom: 10px;
    .orderHeader {
      font-size: 16px;
      color: #2c3e50;
      padding-left: 20px;
      background-color: #f7f8fa;
      span {
        &:first-of-type {
          display: inline-block;
          margin-bottom: 10px;
        }
      }
    }
    /deep/ .van-card {
      margin-top: 0;
      .van-card__thumb {
        margin-right: 30px;
      }
      .van-card__content {
        justify-content: flex-start;
        .van-card__title {
          font-size: 14px;
          font-weight: 700;
          margin-top: 5px;
        }
        .van-card__desc {
          margin: 10px 5px;
          font-size: 12px;
        }
        .van-card__bottom {
          .van-card__price {
            font-size: 17px;
            color: #ff6a00;
            margin-left: 5px;
          }
          .van-card__num {
            font-size: 15px;
          }
        }
      }
    }
  }
}
</style>